<template>
  <dl class="aside flex">
    <!-- <dd class="item"><span class="active">太</span></dd> -->
    <dd
      v-for="item in store.bookList.filter((item) => item.isNew === store.isNew)"
      :key="item._id"
      class="item"
    >
      <span
        @click="changeBook(item.name)"
        :class="{ 
          active: item.name === store.currBook,
          doing: item.readStatus === 2,
          done: item.readStatus === 1
        }"
        >{{ item.name }}</span
      >
    </dd>
    <dd class="fix"></dd>
    <dd class="fix"></dd>
    <dd class="fix"></dd>
    <dd class="fix"></dd>
  </dl>
</template>
<script setup>
import request from "../../api/request";
import { ref, onMounted } from "vue";
import { useStore } from "../../pinia";
// import {storeToRefs} from 'pinia';

const store = useStore();

let { isNew } = defineProps({
  isNew: Boolean,
});

const changeBook = (name) => {
  store.$patch((state) => {
    state.currBook = name;
  });
  store.getChapterList(name);
};


let getList = async () => {
  store.getBookList();
  // let res = await request.get("/bible_book/all");
  // store.$patch(state=>{
  //   state.bookList = res.data;
  // })
};
onMounted(getList);
</script>